﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>Quản lý nguyên liệu</title>
	
    <link rel="Stylesheet" href="Scripts/jtable/themes/redmond/jquery-ui-1.8.16.custom.css" />
    <link rel="Stylesheet" href="Scripts/jtable/themes/metro/blue/jtable.css" />
	<script type="text/javascript" src="Scripts/jtable/scripts/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="Scripts/jtable/scripts/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="Scripts/jtable/scripts/jtable/jquery.jtable.js"></script>
</head>
<body>
    <div id="MenuTableContainer" style="width:700px; border:1px solid red;"></div>

    <script type="text/javascript">
        $(document).ready(function () {

            //Prepare jTable
            $('#MenuTableContainer').jtable({
                title: 'Table of people',
                sorting: true,
                paging: true,
                defaultSorting: 'Name ASC',
                actions: {
                    listAction: 'PersonActions.php?action=list',
                    createAction: 'PersonActions.php?action=create',
                    updateAction: 'PersonActions.php?action=update',
                    deleteAction: 'PersonActions.php?action=delete'
                },
                fields: {
                    PersonId: {
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                    },
                    Name: {
                        title: 'Author Name',
                        width: '40%'
                    },
                    Age: {
                        title: 'Age',
                        width: '20%'
                    },
                    RecordDate: {
                        title: 'Record date',
                        width: '30%',
                        type: 'date',
                        create: false,
                        edit: false
                    },
                    image: {
                        title: 'Photo',
                        width: '10%'
                    }
                }
            });

            //Load person list from server
            $('#MenuTableContainer').jtable('load');

        });
    </script>
</body>
</html>